<template>
    <div>
        <van-cell :title="item.shopname" icon="shop-o" :to="{ name: 'shopindex' }">
            <!-- 使用 right-icon 插槽来自定义右侧图标 -->
            <template #right-icon>
                <van-icon name="search" class="search-icon" style="font-size: 20px" @click="$router.push({ name: 'search' })" />
            </template>
        </van-cell>
        <van-image width="100vw" :src="item.cover" height="210px" />
        <div class="mt-10 ml-10">
            <div style="display: flex">
                <div>
                    <div class="through" v-show="false"></div>
                    <span style="color: orange; font-size: 12px">￥</span
                    ><span style="color: orange; font-size: 19px">{{ pricearr[0] }}</span
                    ><span style="color: orange; font-size: 14px">{{ pricearr[1] }}</span>
                </div>
                <!-- 折扣价 -->
                <div v-show="false">
                    <span style="color: orange; font-size: 12px">￥</span
                    ><span style="color: orange; font-size: 19px">{{ pricearr[0] }}</span
                    ><span style="color: orange; font-size: 14px">{{ pricearr[1] }}</span>
                </div>
            </div>
            <div style="float: right; margin-right: 20px; font-size: 14px" @click="$refs.share.showShare = true">
                分享
                <van-icon name="share-o" />
            </div>
        </div>
        <div class="mt-10 ml-10">
            <span style="color: black; font-weight: bold; font-size: 16px">{{ item.title }}</span>
        </div>
        <div class="mt-10 ml-10">
            <span style="color: #aaa; font-size: 12px">{{ item.description }}</span>
        </div>
        <div class="ml-10">
            <span style="color: #aaa; font-size: 8px">{{ item.view }}次观看</span>
        </div>
        <div class="mt-10" style="height: 5px; background: #eee" />
        <div class="count_time" v-if="time_type">
            <div class="time_left">
                <div v-if="time_type == 'seckill'">秒杀</div>
                <div v-if="time_type == 'limit_discount'">
                    <p><span>限</span><span style="margin-left: 2px">时</span></p>
                    <p><span>折</span><span style="margin-left: 2px">扣</span></p>
                </div>
            </div>
            <div class="time_right">
                <div style="display: flex">限时折扣倒计时：<van-count-down :time="time" format="DD 天 HH 时 mm 分 ss 秒" /></div>
                <div style="display: flex; justify-content: space-between">
                    <div>还剩{{ item.goods_id[0].discount_num }}个</div>
                    <div style="color: red">
                        <span style="text-decoration: line-through; font-size: 12px">￥{{ item.marking_price }}</span>
                        <span>￥{{ item.price }}</span>
                    </div>
                </div>
            </div>
        </div>
        <van-cell title="相关资料下载" icon="notes-o" is-link :value="'共' + filenum + '个文件'" @click="toDownFiles"> </van-cell>
        <!-- <img class="img_yhq" v-if="item.coupon_num > 0" src="../../assets/img/yhq.jpg" alt="" @click="yhq" /> -->
        <div style="height: 5px; background: #eee" />
        <div style="width: 100%">
            <van-tabs v-model="active" @click="activeClick">
                <van-tab title="详情">
                    <div v-html="item.custom_desc"></div>
                </van-tab>
                <van-tab title="目录" v-if="!islogin">
                    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
                        <van-list
                            v-model="loading"
                            :finished="finished"
                            finished-text="没有更多了"
                            @load="onLoad"
                            :immediate-check="false"
                            style="width: 100vw; margin-bottom: 50px"
                        >
                            <div
                                class="mt-10 ml-10"
                                style="width: 100vw; position: relative"
                                v-for="(item, index) in list"
                                :key="index"
                                @click="clickproduct(item.id, item.type)"
                            >
                                <div>
                                    <van-tag type="primary" v-if="item.try_type == 'time'">试看</van-tag>
                                    <van-icon name="shield-o" v-if="item.try_type == 'none' || !item.try_type" size="18px" />
                                    <span class="ml-10" style="font-size: 14px; font-weight: bold">{{ item.title }}</span>
                                </div>
                                <div class="mt-10">
                                    <span style="font-size: 10px">
                                        <van-tag type="success" style="font-size: 6px">{{ item.type | formatType }} </van-tag> </span
                                    ><span class="ml-10" style="font-size: 8px; color: #aaa"
                                        >{{ item.create_time }}
                                        |
                                        {{ item.view }}次学习{{ index }}</span
                                    ><span>
                                        <van-goods-action-button
                                            type="primary"
                                            v-if="item.price == 0"
                                            text="本集免费"
                                            style="width: 80px; position: absolute; right: 10px; bottom: 20px; height: 30px"
                                        />
                                        <van-goods-action-button
                                            v-if="(item.price > 0 && item.alone_sale == 1) || (item.price > 0 && item.type == 'exam')"
                                            type="danger"
                                            text="购买单个"
                                            @click.stop="clickbuyone(item.id, item.type)"
                                            style="width: 80px; position: absolute; right: 10px; bottom: 20px; height: 30px"
                                        />
                                    </span>
                                </div>
                                <van-divider />
                            </div>
                        </van-list>
                    </van-pull-refresh>
                </van-tab>
                <van-tab title="目录" v-else>
                    <van-pull-refresh v-model="refreshing" @refresh="onRefresh2">
                        <van-list
                            v-model="loading"
                            :finished="finished"
                            finished-text="没有更多了"
                            @load="onLoad2"
                            :immediate-check="false"
                            style="width: 100vw; margin-bottom: 50px"
                        >
                            <div
                                class="mt-10 ml-10"
                                style="width: 100vw; position: relative"
                                v-for="(item, index) in loginlist"
                                :key="index"
                                @click="clickproduct(item.id, item.type)"
                            >
                                <div>
                                    <van-tag type="primary" v-if="item.try_type == 'time'">试看</van-tag>
                                    <van-icon name="shield-o" v-if="item.try_type == 'none' || !item.try_type" size="18px" />
                                    <span class="ml-10" style="font-size: 14px; font-weight: bold">{{ item.title }}</span>
                                </div>
                                <div class="mt-10">
                                    <span style="font-size: 10px">
                                        <van-tag type="success" style="font-size: 6px">{{ item.type | formatType }} </van-tag> </span
                                    ><span class="ml-10" style="font-size: 8px; color: #aaa"
                                        >{{ item.create_time }}
                                        |
                                        {{ item.view }}次学习{{ index }}</span
                                    ><span>
                                        <van-goods-action-button
                                            type="primary"
                                            v-if="item.price == 0"
                                            text="本集免费"
                                            style="width: 80px; position: absolute; right: 10px; bottom: 20px; height: 30px"
                                        />
                                        <van-goods-action-button
                                            type="warning"
                                            v-else-if="item.isbuy == 1"
                                            text="你已经购买"
                                            style="width: 80px; position: absolute; right: 10px; bottom: 20px; height: 30px"
                                        />
                                        <van-goods-action-button
                                            type="danger"
                                            v-else-if="(item.alone_sale == 1 && item.isbuy == 0) || (item.price > 0 && item.type == 'exam')"
                                            text="购买单个"
                                            @click.stop="clickbuyone(item.id, item.type)"
                                            style="width: 80px; position: absolute; right: 10px; bottom: 20px; height: 30px"
                                        />
                                    </span>
                                </div>
                                <van-divider />
                            </div>
                        </van-list>
                    </van-pull-refresh>
                </van-tab>
                <van-tab title="课程评价"><xjevaluate :info_id="id" type="column"></xjevaluate></van-tab>
                <van-tab title="相关推荐"><xjtjcourse :category_id="category_id"></xjtjcourse></van-tab>
            </van-tabs>
        </div>
        <van-goods-action>
            <van-goods-action-icon icon="chat-o" text="客服" color="#ee0a24" @click="gokefuchat" />
            <van-goods-action-icon icon="cart-o" text="购物车" @click="clickshopcart" />
            <van-goods-action-icon
                :icon="isselect ? 'star' : 'star-o'"
                :text="isselect ? '已收藏' : '收藏'"
                color="#ff5000"
                @click="clickstar"
            />
            <van-goods-action-button type="primary" text="免费课程" v-if="item.price == 0" />
            <van-goods-action-button type="warning" text="你已购买" v-if="isbuyfull == 1 && item.price != 0" />
            <van-goods-action-button type="warning" text="加入购物车" @click="addShopCart" v-if="isbuyfull == 0 && item.price != 0" />
            <van-goods-action-button type="danger" text="立即购买" @click="clickbuy" v-if="isbuyfull == 0 && item.price != 0" />
        </van-goods-action>
        <!-- 一开始不显示微信注册组件 -->
        <xjweixinreglogin @loginData="loginData" ref="xjwxreglogincom"></xjweixinreglogin>
        <xjshare ref="share"></xjshare>
        <van-dialog v-model="coupon_shop" :title="title" @closed="ces()" class="yhqlog" confirmButtonText="一键领取" @confirm="yhqlq()">
            <div class="yhq" v-for="item in ticketArr" :key="item">
                <div class="yhq_left">
                    <div>
                        {{ item.menkan_price > 0 ? '满' + item.menkan_price + '减' + item.jian_price : '减' + item.jian_price }}
                    </div>
                    <div style="margin-top: 5px">
                        {{ item.menkan_price > 0 ? ' 满减卷' : '无门槛卷' }}
                    </div>
                </div>
                <div style="margin-left: 15px;text-align: center;">
                    <!-- <div class="yhq_btn" @click="toticket(item.id)">点击查看</div> -->
                    <p>有效期至</p>
                    <p style="margin-top: 5px; font-size: 12px">{{item.end_time}}</p>
                </div>
            </div>
        </van-dialog>
    </div>
</template>

<script>
import Cookies from 'js-cookie';
import xjevaluate from '@/components/frontshop/xjevaluate.vue';
import xjtjcourse from '@/components/frontshop/xjtjcourse.vue';
import xjshare from '@/components/frontshop/xjshare.vue';
import xjweixinreglogin from '@/components/frontshop/xjweixinreglogin.vue';
import moment from 'moment';
export default {
    components: {
        xjweixinreglogin,
        xjevaluate,
        xjtjcourse,
        xjshare
    },
    filters: {
        formatType(data) {
            if (data == 'video') {
                return '视频';
            } else if (data == 'audio') {
                return '音频';
            } else if (data == 'image_text') {
                return '图文';
            } else if (data == 'exam') {
                return '试卷';
            }
        }
    },
    data() {
        return {
            ticketArr: [],
            title: '',
            coupon_shop: false,
            time_type: '',
            time: 30 * 60 * 60 * 1000,
            shopname: localStorage.getItem('shopname') ? localStorage.getItem('shopname') : '', //店铺名
            item: '',
            pricearr: [], //视频价格处理数组
            active: 1, //分类详情页为内容1
            filenum: 2, //下载资料数量
            isselect: 0, //收藏显示
            id: '', //专栏id
            list: [], //视频列表
            loginlist: [],
            knowledgelist: '', //过渡视频列表用于分页
            loading: true,
            finished: false,
            refreshing: false,
            page: 1,
            total: '',
            islogin: false,
            isbuyfull: 0, //没有购买全集
            category_id: ''
        };
    },
    methods: {
        async yhqlq() {
            let couponid = [];
            this.ticketArr.map((item) => {
                couponid.push(item.id);
            });
            let res = await this.$frontaxios.post(this.$front.insertUserCoupon, { couponid });
            console.log(res);
            if (res.code == 1) {
                this.$toast.success('领取优惠券成功');
            } else if (res.code == -2) {
                this.$dialog.alert({ title: '温馨提示', message: '你领取的数量已经超过限额' });
            } else if (res.code == -3) {
                this.$dialog.alert({ title: '温馨提示', message: '该优惠券已被抢光了' });
            }
        },
        shutick() {
            this.coupon_shop = false;
        },
        ces() {
            console.log(222);
        },
        gokefuchat() {
            let orderid = this.$route.query.id;
            this.$router.push({ name: 'kefuchat', query: { orderid } });
        },
        async clickstar() {
            //收藏
            if (this.isselect == 0) {
                this.isselect = 1;
                let res = await this.$frontaxios.post(this.$front.addUserCollect, { columnid: this.$route.query.id });
                if (res.code == 1) {
                    this.$toast.success('添加收藏成功');
                } else {
                    this.$toast.fail('添加收藏失败');
                }
            } else {
                this.isselect = 0;
                let res = await this.$frontaxios.post(this.$front.delUserCollect, { columnid: this.$route.query.id });
                if (res.code == 1) {
                    this.$toast.success('取消收藏成功');
                } else {
                    this.$toast.fail('取消收藏失败');
                }
            }
        },
        clickbuy() {
            // 购买
            if (isWeixin()) {
                //let rst = Cookies.get('fronttoken');
                let logintag = sessionStorage.getItem('logintag') ? sessionStorage.getItem('logintag') : 0;
                if (logintag == 0) {
                    //如果没有有fronttoken,则提示登录
                    sessionStorage.setItem('loginflag', 1);
                    this.$refs.xjwxreglogincom.getData();
                } else {
                    this.toOrder();
                }
            } else {
                //html5浏览器
                this.$dialog.alert({ title: '温馨提示', message: '请在微信客户端打开此页面支付购买' });
            }
        },
        clickbuyone(id, type) {
            if (isWeixin()) {
                let rst = Cookies.get('fronttoken');
                //    alert(rst)
                let logintag = sessionStorage.getItem('logintag') ? sessionStorage.getItem('logintag') : 0;
                if (logintag == 0) {
                    //如果没有有fronttoken,则提示登录
                    sessionStorage.setItem('loginflag', 1);
                    this.$refs.xjwxreglogincom.getData();
                } else {
                    this.toOrderOne(id, type);
                }
            } else {
                //html5浏览器
                this.$dialog.alert({ title: '温馨提示', message: '请在微信客户端打开此页面支付购买' });
            }
        },
        clickshopcart() {
            if (isWeixin()) {
                //let rst = Cookies.get('fronttoken');
                let logintag = sessionStorage.getItem('logintag') ? sessionStorage.getItem('logintag') : 0;
                if (logintag == 0) {
                    //rst == undefined||
                    //如果没有有fronttoken,则提示登录
                    sessionStorage.setItem('loginflag', 1);
                    this.$refs.xjwxreglogincom.getData();
                    return;
                }
            } else {
                let rst = Cookies.get('fronttoken');
                let htmllogintag = sessionStorage.getItem('htmllogintag') ? sessionStorage.getItem('htmllogintag') : 0;
                if (rst == undefined || htmllogintag == 0) {
                    this.$router.push({ name: 'my' });
                    return;
                }
            }
            this.$router.push({ name: 'shopcart' });
        },
        //获得登录状态下的知识列表
        async getKnowledgeList2(id) {
            let query = {
                id,
                page: this.page,
                limit: 10
            };
            let res = await this.$frontaxios.post(this.$front.getKnowledgeList2, query);
            if (res.code == 1) {
                this.loading = true;
                this.knowledgelist = res.data.knowledgedata;
                console.log(this.knowledgelist);
                this.total = res.data.total;
                this.isbuyfull = res.data.isbuyfull; //是否购买全本
            }
        },
        async getKnowledgeList(id) {
            //没有登录时的显示
            let query = {
                id,
                page: this.page,
                limit: 10
            };
            let res = await this.$frontaxios.post(this.$front.getKnowledgeList, query);
            console.log(res);
            if (res.code == 1) {
                this.loading = true;
                this.knowledgelist = res.data.knowledgedata;
                this.total = res.data.total;
                this.isbuyfull = 0; //是否购买全本
            }
        },
        clickproduct(id, type) {
            this.$frontaxios.post(this.$front.recordStudy, { columnid: this.id });
            //跳转到观看内容页
            if (type == 'video') {
                this.$router.push({ name: 'videocontent', query: { id, columnid: this.id } });
            }
            if (type == 'audio') {
                this.$router.push({ name: 'audiocontent', query: { id, columnid: this.id } });
            }
            if (type == 'image_text') {
                this.$router.push({ name: 'image_textcontent', query: { id, columnid: this.id } });
            }
            if (type == 'exam') {
                this.$router.push({ name: 'examcontent', query: { id, columnid: this.id } });
            }
        },
        yhq() {
            this.$router.push({ name: 'ticket', query: { columnid: this.id } });
        },
        loginData(val) {
            if (isWeixin()) {
                if (val == 1) {
                    this.islogin = true; //显示登录数据去数据库查询是否购买了课程没有
                }
            }
        },

        convertTimestampToTime(endTime) {
            var nowTime = Math.floor(Date.now() / 1000);
            var remainingTime = endTime - nowTime;
            this.time = remainingTime * 1000;
        },

        async getLoginData() {
            this.id = this.$route.query.id; //单个专栏id
            let query = {
                id: this.id
            };
            let res = await this.$frontaxios.post(this.$front.getOneColumn2, query);
            if (res.code == 1) {
                this.item = res.data;
                this.category_id = res.data.category_id;
                this.isselect = res.data.isselect;
                this.time_type = res.data.type;
                this.convertTimestampToTime(res.data.end_time);
            } else {
                console.log('获取单个专栏失败');
            }
            if (this.item.price > 0) {
                let pricearr = this.item.price.toString().split('.');
                this.pricearr[0] = pricearr[0] + '.';
                this.pricearr[1] = pricearr[1] == undefined ? '00' : pricearr[1];
            } else if (this.item.price == 0) {
                this.pricearr[0] = 0 + '.';
                this.pricearr[1] = '00';
            }
            this.onLoad2();
        },
        async onLoad2() {
            //加载多个视频列表
            if (this.refreshing) {
                this.loginlist = [];
                this.refreshing = false;
            }
            await this.getKnowledgeList2(this.id);
            //this.loginlist=[];
            this.loginlist.push(...this.knowledgelist);
            this.page++;
            this.loading = false;
            if (this.loginlist.length >= this.total) {
                this.finished = true;
            }
        },
        onRefresh2() {
            // 清空列表数据
            this.finished = false;
            // 重新加载数据
            // 将 loading 设置为 true，表示处于加载状态
            this.loading = true;
            this.page = 1;
            this.onLoad2();
            this.$toast.success('刷新成功');
        },
        async getData() {
            this.id = this.$route.query.id; //单个专栏id
            let query = {
                id: this.id
            };
            let res = await this.$frontaxios.post(this.$front.getOneColumn, query);
            if (res.code == 1) {
                this.item = res.data;
                console.log(res);
                this.category_id = res.data.category_id;
                console.log(this.item);
            } else {
                console.log('获取单个专栏失败');
            }
            let pricearr = this.item.price.split('.');
            this.pricearr[0] = pricearr[0] + '.';
            this.pricearr[1] = pricearr[1];
            this.onLoad();
        },
        async onLoad() {
            //加载多个视频列表
            if (this.refreshing) {
                this.list = [];
                this.refreshing = false;
            }
            let id = this.$route.query.id;
            await this.getKnowledgeList(id);
            this.list.push(...this.knowledgelist);
            this.page++;
            this.loading = false;
            if (this.list.length >= this.total) {
                this.finished = true;
            }
        },
        onRefresh() {
            // 清空列表数据
            this.finished = false;
            // 重新加载数据
            // 将 loading 设置为 true，表示处于加载状态
            this.loading = true;
            this.page = 1;
            this.onLoad();
            this.$toast.success('刷新成功');
        },
        toOrder() {
            let domainname = this.$route.params.domainname; //获取店铺名
            let FrontUrl = window.location.protocol + '//' + window.location.host;
            const nexturl = FrontUrl + `/xuejing/order/${domainname}?id=${this.id}`; //跳转到下一个页面的地址http://192.168.2.11/#/xuejing/order/test1?id=8
            let url = this.$front.getWeiXinOpenId + `?nexturl=${encodeURIComponent(nexturl)}`; //请求获得openid并存入到服务器的Cache当中
            window.location.href = url;
            // this.$router.push({ name: 'order', query: { id: this.id } });
        },
        toOrderOne(id, type) {
            let domainname = this.$route.params.domainname;
            let FrontUrl = window.location.protocol + '//' + window.location.host;
            if (type == 'exam') {
                const nexturl = FrontUrl + `/xuejing/orderoneexam/${domainname}?id=${id}`; //跳转到下一个页面的地址http://192.168.2.11/#/xuejing/order/test1?id=8
                let url = this.$front.getWeiXinOpenId + `?nexturl=${encodeURIComponent(nexturl)}`; //请求获得openid并存入到服务器的Cache当中
                window.location.href = url;
            } else {
                const nexturl = FrontUrl + `/xuejing/orderone/${domainname}?id=${id}`; //跳转到下一个页面的地址http://192.168.2.11/#/xuejing/order/test1?id=8
                console.log(nexturl);
                let url = this.$front.getWeiXinOpenId + `?nexturl=${encodeURIComponent(nexturl)}`; //请求获得openid并存入到服务器的Cache当中
                window.location.href = url;
            }
            //this.$router.push({ name: 'order', query: { id: this.id } });
        },
        async addShopCart() {
            if (isWeixin()) {
                //let rst = Cookies.get('fronttoken');
                let logintag = sessionStorage.getItem('logintag') ? sessionStorage.getItem('logintag') : 0;
                if (logintag == 0) {
                    //如果没有有fronttoken,则提示登录
                    sessionStorage.setItem('loginflag', 1);
                    this.$refs.xjwxreglogincom.getData();
                    return;
                }
            } else {
                let rst = Cookies.get('fronttoken');
                let htmllogintag = sessionStorage.getItem('htmllogintag') ? sessionStorage.getItem('htmllogintag') : 0;
                if (rst == undefined || htmllogintag == 0) {
                    this.$router.push({ name: 'my' });
                    return;
                }
            }
            let res = await this.$frontaxios.post(this.$front.addShopCart, { id: this.id });
            if (res.code == 1) {
                this.$toast.success('添加购物车成功');
            } else if (res.code == -2) {
                this.$toast.fail('商品已加入购物车');
            } else if (res.code == -3) {
                this.$toast.fail('添加购物车失败');
            } else if (res.code == -1) {
                this.$toast.fail('你已经购买过此专栏了');
            }
        },
        async getDownFiles() {
            this.id = this.$route.query.id;
            let res = await this.$frontaxios.post(this.$front.getColumnDownFileNoLogin, { column_id: this.id });
            //console.log(res);
            if (res.code == 1) {
                this.filenum = res.data.count;
            }
        },
        toDownFiles() {
            this.$router.push({ name: 'downfiles', query: { id: this.$route.query.id } });
        },
        activeClick(type) {
            if (type == 1) {
                this.page = 1;
                this.loading = true;
                this.finished = false;
            }
        },
        async query() {
            let res = await this.$frontaxios.post(this.$front.getColumnCoupon, { columnid: this.$route.query.id });
            console.log(res);
            if(res.data.length>0){
                this.coupon_shop=true
            }
            if (res.code == 1) {
                this.ticketArr = res.data;
            }
        }
    },
    created() {
        this.query();
        let id = this.$route.query.id;
        this.getKnowledgeList(id);
        if (isWeixin()) {
            //let rst = Cookies.get('fronttoken');
            let logintag = sessionStorage.getItem('logintag') ? sessionStorage.getItem('logintag') : 0;
            if (logintag == 0) {
                //rst==undefined||
                this.islogin = false;
                this.getData();
                this.getDownFiles();
            } else {
                this.islogin = true;
                this.getLoginData();
                this.getDownFiles();
            }
        } else {
            let rst = Cookies.get('fronttoken');
            let htmllogintag = sessionStorage.getItem('htmllogintag') ? sessionStorage.getItem('htmllogintag') : 0;
            if (rst == undefined || htmllogintag == 0) {
                //rst==undefined||
                this.islogin = false;
                this.getData();
                this.getDownFiles();
            } else {
                this.islogin = true;
                this.getLoginData();
                this.getDownFiles();
            }
        }
    }
};
</script>

<style lang='scss' >
.through {
    height: 1px;
    background-color: black;
    transform: rotate(-5deg);
    position: relative;
    top: 12px;
}
.img_yhq {
    height: 100px;
    width: 100%;
}
.count_time {
    margin: 20px 0;
    padding: 20px;
    background-color: #faedea;
    display: flex;

    .time_left {
        width: 65px;
        height: 65px;
        background-color: #ec5f5a;
        border-radius: 50%;
        text-align: center;
        color: #fff;
        line-height: 65px;
        p {
            margin-top: -5px;
            height: 20px;
        }
    }
    .time_right {
        margin-left: 10px;
        color: #706f79;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
}
.yhqlog {
    background-color: red;
}
.yhq {
    display: flex;
    padding: 10px 5px;
    margin: 5px auto;
    width: 90%;
    background-color: #fff;
    border-radius: 10px;
    font-size: 14px;
}
.yhq_left {
    width: 50%;
    text-align: center;
    color: #ff882d;
}
.yhq_btn {
    padding: 2px;
    text-align: center;
    height: 20px;
    border-radius: 15px;
    background-color: #ff882d;
    color: #fff;
}
.shut {
    color: #fff;
    position: absolute;
    bottom: -23px;
    left: 138px;
}
</style>
